<template>
  <div>
    <div class="series_content" v-for="item in recommendList" 
    :key="item.id"  @click='resourceDet(item.id,item.types)'>
      <div class="series_cover">
        <img class='series_img' :src="coverUrl(item.cover,'file')" @error="notFind()">
        <!-- <img class='nav_img' src='@/assets/course/cover.png' v-else> -->
      </div>
      <div class="series_bottom">
        <div class="series_name">{{item.name}}</div>
        <div class='series_main'>
          <span class="series_realprice" v-if="item.price>0" style='color:#E40000'>￥{{item.price}}</span>
          <span v-else style='color:#0AB562' class="series_realprice">免费</span>
          <span class="series_lineprice" v-if="item.linePrice">￥{{item.linePrice}}</span>
        </div>
        <div class="series_browse">
          <img src="@/assets/index/browse.png" class="browse_icon">
          {{item.clickNum}}
        </div>
      </div>
    </div>
    <div v-if="!recommendList || recommendList.length == 0" class="review_nullBox">
      <img src='@/assets/resourceDetails/review.png' class='review_nullIcon'>
      <div class="review_nullText">暂无推荐</div>
    </div>
  </div>
</template>
<script>
export default {
  name:'recommend',
  props:{
    recommendList:{}
  },
  methods: {
    resourceDet(id,types) {//资源详情
      if (types == '3') {//课程详情
        localStorage.setItem("courseId",id)
        if(this.$route.name != "courseDet"){
          this.$router.push({name:'courseDet'})
        } else{
          window.location.reload() //重新加载，更换了资源id
        }
      }
      if (types == '5') {//视频详情
        localStorage.setItem("videoId",id)
        if(this.$route.name != "videoDet"){
          this.$router.push({name:'videoDet'})
        } else{
          window.location.reload() //重新加载，更换了资源id
        }
      }
      if (types == '6') {//音频详情
        localStorage.setItem("audioId",id)
        if(this.$route.name != "audioDet"){
          this.$router.push({name:'audioDet'})
        } else{
          window.location.reload() //重新加载，更换了资源id
        }
      }
    },
  }
}
</script>


<style scoped>
.series_content{
  display: flex;
  border-bottom: solid 1px #EEEEEE;
  padding: 0.28rem 0;
}
.series_cover{
  width: 3rem;
  margin-right: 0.24rem;
}
.series_cover img{
  width: 3rem;
  height: 2rem;
}
.series_bottom{
  flex:1;
}
.series_name{
  min-height: 0.74rem;
  color: #202021;
  font-weight:bold;
  line-height: 0.4rem;
  font-size: 15px;
  white-space: normal;
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
  text-overflow:ellipsis;
  display: -webkit-box;
}

/* 推荐-资源 */
.series_main{
  font-size: 11px;
  color: #BDBEBD;
  margin-top: 0.8rem;
  overflow: hidden;
  float: left;
  font-size: 12px;
}
/* 价格 */
.series_realprice{
  color: #FE2023;
  font-size: 14px;
  line-height:0.4rem;
  margin-right: 0.15rem;
  font-weight:500;
}
.series_lineprice{
  text-decoration: line-through;
  color: #9C9D9C;
}
.series_browse{
  float: right;
  margin-top: 0.86rem;
  color: #9C9D9C;
}
.browse_icon{
  height: 0.2rem;
  width: 0.2rem;
  margin-right: 0.08rem; 
}
/* 暂无推荐 */
.review_nullBox{
  text-align: center;
}
.review_nullIcon{
  height: 2.52rem;
  width: 2.82rem;
  margin: 0.4rem auto;
}
.review_nullText{
  color: #BDC2CB;
  font-weight: 500;
  margin-bottom: 0.4rem;
}
</style>

